{% extends 'base.html' %}
{% block title %}公开课视频学习 - 慕学在线网{% endblock %}
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="/">首页</a>></li>
                <li><a href="{% url 'course:list' %}">公开课程</a>></li>
                <li><a href="{% url 'course:detail' course.id %}">课程详情</a>>></li>
                <li>章节信息</li>
            </ul>
        </div>
    </section>
{% endblock %}

{% block content %}
{#    <div id="main">#}
        <div class="w">
            <video id="my-video" class="video-js" controls preload="auto" width="640" height="540"
                   poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
                <source src="{{ video.url }}" type='video/mp4'>
                {#                <source src="{{ vedio.url }}" type='video/webm'>#}
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <div class="course-info-main clearfix w has-progress">

            <div class="info-bar clearfix">
                <div class="content-wrap clearfix">
                    <div class="content">
                        <div class="mod-tab-menu">
                            <ul class="course-menu clearfix">
                                <li><a class="ui-tabs-active active" id="learnOn"
                                       href="{% url 'course:info' course.id %}"><span>章节</span></a></li>
                                <li><a id="commentOn" class=""
                                       href="{% url 'course:comment' course.id %}"><span>评论</span></a></li>
                            </ul>
                        </div>
                        <div id="notice" class="clearfix">
                            <div class="l"><strong>课程公告:</strong> <a
                                    href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a></div>
                        </div>

                        <div class="mod-chapters">

                            {% for lesson in lessons %}
                                <div class="chapter chapter-active">
                                    <h3>
                                        <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                                    </h3>
                                    <ul class="video">
                                        {% for video in lesson.get_lesson_video %}
                                            <li>
                                                <a target="_blank" href='{{ video.url }}'
                                                   class="J-media-item studyvideo">
                                                    {{ video.name }} ({{ video.video_times }})
                                                    <i class="study-state"></i>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                    <div class="aside r">
                        <div class="bd">

                            <div class="box mb40">
                                <h4>资料下载</h4>
                                <ul class="downlist">
                                    {% for resource in all_resources %}
                                        <li>
                                            <span><i
                                                    class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                            <a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode"
                                               target="_blank" download="" data-id="274" title="">下载</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="box mb40">
                                <h4>讲师提示</h4>
                                <div class="teacher-info">
                                    <a href="/u/315464/courses?sort=publish" target="_blank">
                                        <img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80'
                                             height='80'/>
                                    </a>
                                    <span class="tit">
          <a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
        </span>
                                    <span class="job">{{ course.teacher.work_position }}</span>
                                </div>
                                <div class="course-info-tip">
                                    <dl class="first">
                                        <dt>课程须知</dt>
                                        <dd class="autowrap">{{ course.need_know }}</dd>
                                    </dl>
                                    <dl>
                                        <dt>老师告诉你能学到什么？</dt>
                                        <dd class="autowrap">{{ course.will_study }}</dd>
                                    </dl>
                                </div>
                            </div>


                            <div class="cp-other-learned  js-comp-tabs">
                                <div class="cp-header clearfix">
                                    <h2 class="cp-tit l">该课的同学还学过</h2>
                                </div>
                                <div class="cp-body">
                                    <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course"
                                         style="display: block">
                                        <!-- img 200 x 112 -->
                                        <ul class="other-list">
                                            {% for sudy_course in study_courses %}
                                                <li class="curr">
                                                    <a href="{% url 'course:detail' sudy_course.id %}" target="_blank">
                                                        <img src="{{ MEDIA_URL }}{{ sudy_course.image }}"
                                                             alt="{{ sudy_course.name }}">
                                                        <span class="name autowrap">{{ sudy_course.name }}</span>
                                                    </a>
                                                </li>

                                            {% endfor %}

                                        </ul>
                                    </div>
                                    <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
                                        <ul class="other-list">
                                            <li class="curr">
                                                <a href="/course/programdetail/pid/31?src=sug" target="_blank">
                                                    <img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg"
                                                         alt="Java工程师">
                                                    <span class="name autowrap">Java工程师</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="clear"></div>

            </div>

        </div>
{#    </div>#}
{% endblock %}


{% block custom_css %}
    <link rel="stylesheet" type="text/css" href="/static/css/muke/base.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/muke/common-less.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/muke/course/learn-less.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/mooc.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/muke/course/common-less.css">

    <link href="http://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <style>
        #my-video {
            width: 100%;
        }

        .video-js .vjs-big-play-button {
            top: 50%;
            left: 50%;
        }
    </style>
{% endblock %}

{% block custom_js %}
    <script src="http://vjs.zencdn.net/6.2.7/video.js"></script>
{% endblock %}
